<!DOCTYPE html>
<html>
<head>

    <meta name = "viewport" content="width=device-width">
    <meta charset="UTF-8">
    <!-- Favicon and Title -->
    <title>CalculatorByWxl</title>
    <link rel="shortcut icon" href="../static/favicon.png">
    <style>
    body{
      height: 100%;
    }
    .container{
      height: 100%;
    }
    </style>
    <!-- CSS Files -->
    <link href="../static/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <link href="../static/css/hover-min.css" rel="stylesheet" type="text/css" media="all"/>
    <link href="../static/css/creative.css" rel="stylesheet" type="text/css" />
    <link href="../static/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
</head>
<body>

    <form id='sub-form' action="{{ url_for('calculate') }}" method="POST">
      <input id='feval' type="hidden" name="eval" value="">
      <input id='ftype' type="hidden" name="type" value="">
    </form>
    <!-- HTML form and heading -->
    <div class="container">
        <div class="col-md-6  calculator" align="center">
            <div class="row displayBox">
                <div class="displayText" id="display" contenteditable="true" nowrap>0</div>
            </div>
            <div class="row numberPad">
                <div class="col-md-9">
                    <div class="row">
                        <button class="btn clear hvr-back-pulse" id="clear">C</button>
                        <button class="btn btn-calc hvr-radial-out" id="sqrt">√</button>
                        <button class="btn btn-calc hvr-radial-out hvr-radial-out" id="square">x<sup>2</sup></button>
                        <button class="btn btn-calc hvr-radial-out hvr-radial-out" id="backspace"><</button>
                    </div>
                    <div class="row">
                        <button class="btn btn-calc hvr-radial-out" id="seven">7</button>
                        <button class="btn btn-calc hvr-radial-out" id="eight">8</button>
                        <button class="btn btn-calc hvr-radial-out" id="nine">9</button>
                        <button class="btn btn-calc hvr-radial-out hvr-radial-out" id="left-b">(</button>
                    </div>
                    <div class="row">
                        <button class="btn btn-calc hvr-radial-out" id="four">4</button>
                        <button class="btn btn-calc hvr-radial-out" id="five">5</button>
                        <button class="btn btn-calc hvr-radial-out" id="six">6</button>
                        <button class="btn btn-calc hvr-radial-out hvr-radial-out" id="right-b">)</button>
                    </div>
                    <div class="row">
                        <button class="btn btn-calc hvr-radial-out" id="one">1</button>
                        <button class="btn btn-calc hvr-radial-out" id="two">2</button>
                        <button class="btn btn-calc hvr-radial-out" id="three">3</button>
                        <button class="btn btn-calc hvr-radial-out hvr-radial-out" id="abs">|</button>
                    </div>
                    <div class="row">
                        <button class="btn btn-calc hvr-radial-out" id="plus_minus">&#177;</button>
                        <button class="btn btn-calc hvr-radial-out" id="zero">0</button>
                        <button class="btn btn-calc hvr-radial-out" id="decimal">.</button>
                        <button class="btn btn-calc hvr-radial-out hvr-radial-out" id="apple" data-toggle="modal" data-target="#myModal">★</button>
                    </div>
                </div>
                <div class="col-md-3 operationSide">
                    <button id="divide" class="btn btn-operation hvr-fade">÷</button>
                    <button id="multiply" class="btn btn-operation hvr-fade">×</button>
                    <button id="subtract" class="btn btn-operation hvr-fade">−</button>
                    <button id="add" class="btn btn-operation hvr-fade">+</button>
                    <button id="equals" class="btn btn-operation equals hvr-back-pulse">></button>
                </div>
            </div>
        </div>
        <div class="col-md-6  calculator" align="center" style="height:100%;">
        {% block body %}
          <div class="row numberPad" style="height:90%;">
              {% for content in display %}
              <div class="row" style="height: 10%;" align="center" >
                  <div class="text-center" style="height: 100%;background-color: #c4e3f3;font-size: 45px;width: 80%;border: solid transparent ; "    >
                      {{ content }}
                  </div>
              </div>
              {% endfor %}
              {% for content in result %}
             <div class="row" style="height: 10%;" align="center" >
                  <div class="text-center" style="height: 100%;background-color: #c9e2b3;font-size: 50px;width: 80%;border: solid transparent;"  >
                      {{ content }}
                  </div>
              </div>
              {% endfor %}
          </div>
        {% endblock %}
            <div class="row" style="height:10%;">
              <div class="col-md-6" style="height:100%;">
                <button  id="eq" style="height:100%;" class="btn btn-operation equals hvr-back-pulse bottom">=</button>
              </div>
              <div class="col-md-6" style="height:100%;">
                <button style="height:100%;" id="cls" class=" btn btn-operation equals hvr-back-pulse bottom">clear</button>
              </div>
            </div>
        </div>
    </div>
    <!-- JavaScript Files -->
    <script src="../static/js/jquery.min.js"></script>
    <script src="../static/js/bootstrap.min.js"></script>
    <script src="../static/js/calculate.js"></script>
</body>
</html>
